<template>
  <div class="detail">
    <div class="main">
      <div class="content">
        <div class="head">
          <div class="head_wrap">
            <div class="title">{{result.basicAssets}}</div>
            <div class="records_item_detail">
              <div class="qixian">
                <div class="num mainColor">{{result.duration}}<span style="font-size: 14px;font-weight:normal;" v-if="result.durationCompany">{{result.durationCompany}}</span></div>
                <div class="detail_title">期限</div>
              </div>
              <div class="shengyu">
                <div class="num mainColor">{{result.investmentScale}}<span style="font-size: 14px;font-weight:normal;" v-if="result.investmentScaleCompany">{{result.investmentScaleCompany}}</span></div>
                <div class="detail_title">产品规模</div>
              </div>
            </div>
            <div class="rules" style="display:none;">
              <span>收益分配：</span>
              <span style="color: #666;">{{result.incomeDistribution}}</span>
            </div>
          </div>
        </div>
        <div class="cont">
          <div class="base" v-if="result.type != 3">
            <div class="collapse_wrap">
              <van-collapse v-model="activeName1" :border="false">
                <van-collapse-item name="1">
                  <template #title><div style="font-weight:700;font-size:16px;">基本资料</div></template>
                  <div class="base_info">
                    <div class="base_info_wrap">
                      <div class="text">基础资产：</div>
                      <div class="con">{{result.assetsName}}</div>
                    </div>
                    <!-- <div class="base_info_wrap">
                      <div class="text">产品名称：</div>
                      <div class="con">{{result.basicAssets}}</div>
                    </div> -->
                    <div class="base_info_wrap">
                      <div class="text">发行人：</div>
                      <div class="con">{{result.publisher}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">投资顾问：</div>
                      <div class="con">{{result.investmentConsultant}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">担保方：</div>
                      <div class="con">{{result.guarantors}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">备案机构：</div>
                      <div class="con">{{result.filingOrganization}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">备案编号：</div>
                      <div class="con">{{result.recordNo}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">认购起点：</div>
                      <div class="con">{{result.subscription}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">收益分配：</div>
                      <div class="con">{{result.incomeDistribution}}</div>
                    </div>
                  </div>
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="collapse_wrap">
              <van-collapse v-model="activeName2" :border="false">
                <van-collapse-item name="2">
                  <template #title><div style="font-weight:700;font-size:16px;">业绩比较基准</div></template>
                  <div class="assets_detail" v-html="result.benchmark"></div>
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="collapse_wrap">
              <van-collapse v-model="activeName3" :border="false">
                <van-collapse-item name="3">
                  <template #title><div style="font-weight:700;font-size:16px;">专用监管账户</div></template>
                  <div class="base_info">
                    <div class="base_info_wrap">
                      <div class="text">账户名称：</div>
                      <div class="con">{{result.accountName}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">开户银行：</div>
                      <div class="con">{{result.bank}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">账号：</div>
                      <div class="con">{{result.account}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">大额行号：</div>
                      <div class="con">{{result.lineNumber}}</div>
                    </div>
                  </div>
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="collapse_wrap">
              <van-collapse v-model="activeName4" :border="false">
                <van-collapse-item name="4">
                  <template #title><div style="font-weight:700;font-size:16px;">还款来源</div></template>
                  <div class="assets_detail" v-html="result.repayment"></div>
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="collapse_wrap">
              <van-collapse v-model="activeName5" :border="false">
                <van-collapse-item name="5">
                  <template #title><div style="font-weight:700;font-size:16px;">增信措施</div></template>
                  <div class="assets_detail" v-html="result.addMeasure"></div>
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="collapse_wrap">
              <van-collapse v-model="activeName6" :border="false">
                <van-collapse-item name="6">
                  <template #title><div style="font-weight:700;font-size:16px;">补充风控措施</div></template>
                  <div class="assets_detail" v-html="result.managementMeasures"></div>
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="collapse_wrap">
              <van-collapse v-model="activeName7">
                <van-collapse-item name="7">
                  <template #title><div style="font-weight:700;font-size:16px;">预览材料</div></template>
                  <div class="info_view" @click="viewPdf(result.fileUrla)" v-if="result.fileUrla">
                    <div class="pdf_left">
                      <div class="icon pdf_icon mainColor">
                        <img src="../assets/pdf_icon.png" style="width:100%;height:100%;" alt="">
                      </div>
                      <div class="pdf_text">产品说明</div>
                    </div>
                    <div class="icon pdf_right" v-html="'&#xe7a7;'"></div>
                  </div>
                  <div class="info_view" @click="viewPdf(result.fileUrlb)" v-if="result.fileUrlb">
                    <div class="pdf_left">
                      <div class="icon pdf_icon mainColor">
                        <img src="../assets/pdf_icon.png" style="width:100%;height:100%;" alt="">
                      </div>
                      <div class="pdf_text">认购协议</div>
                    </div>
                    <div class="icon pdf_right" v-html="'&#xe7a7;'"></div>
                  </div>
                  <div class="info_view" @click="viewPdf(result.fileUrlc)" v-if="result.fileUrlc">
                    <div class="pdf_left">
                      <div class="icon pdf_icon mainColor">
                        <img src="../assets/pdf_icon.png" style="width:100%;height:100%;" alt="">
                      </div>
                      <div class="pdf_text">备案文件</div>
                    </div>
                    <div class="icon pdf_right" v-html="'&#xe7a7;'"></div>
                  </div>
                  <div class="info_view" @click="viewPdf(result.fileUrld)" v-if="result.fileUrld">
                    <div class="pdf_left">
                      <div class="icon pdf_icon mainColor">
                        <img src="../assets/pdf_icon.png" style="width:100%;height:100%;" alt="">
                      </div>
                      <div class="pdf_text">底层资产</div>
                    </div>
                    <div class="icon pdf_right" v-html="'&#xe7a7;'"></div>
                  </div>
                  <div class="info_view" @click="viewPdf(result.fileUrle)" v-if="result.fileUrle">
                    <div class="pdf_left">
                      <div class="icon pdf_icon mainColor">
                        <img src="../assets/pdf_icon.png" style="width:100%;height:100%;" alt="">
                      </div>
                      <div class="pdf_text">担保文件</div>
                    </div>
                    <div class="icon pdf_right" v-html="'&#xe7a7;'"></div>
                  </div>
                </van-collapse-item>
              </van-collapse>
            </div>
          </div>
          <div class="base" v-else>
            <div class="collapse_wrap">
              <van-collapse v-model="activeName1" :border="false">
                <van-collapse-item name="1">
                  <template #title><div style="font-weight:700;font-size:16px;">基本资料</div></template>
                  <div class="base_info">
                    <!-- <div class="base_info_wrap">
                      <div class="text">投资对象：</div>
                      <div class="con">{{result.investmentTarget}}</div>
                    </div> -->
                    <div class="base_info_wrap">
                      <div class="text">标的项目：</div>
                      <div class="con">{{result.targetProject}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">管理人：</div>
                      <div class="con">{{result.publisher}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">托管方：</div>
                      <div class="con">{{result.investmentConsultant}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">担保方：</div>
                      <div class="con">{{result.guarantors}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">备案机构：</div>
                      <div class="con">{{result.filingOrganization}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">备案编号：</div>
                      <div class="con">{{result.recordNo}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">产品规模：</div>
                      <div class="con">{{result.productScale}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">期限：</div>
                      <div class="con">{{result.term}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">认购起点：</div>
                      <div class="con">{{result.subscription}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">收益分配：</div>
                      <div class="con">{{result.incomeDistribution}}</div>
                    </div>
                  </div>
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="collapse_wrap">
              <van-collapse v-model="activeName2" :border="false">
                <van-collapse-item name="2">
                  <template #title><div style="font-weight:700;font-size:16px;">业绩比较基准</div></template>
                  <div class="assets_detail" v-html="result.benchmark"></div>
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="collapse_wrap">
              <van-collapse v-model="activeName3" :border="false">
                <van-collapse-item name="3">
                  <template #title><div style="font-weight:700;font-size:16px;">募集账户信息</div></template>
                  <div class="base_info">
                    <div class="base_info_wrap">
                      <div class="text">账户名称：</div>
                      <div class="con">{{result.accountName}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">账号：</div>
                      <div class="con">{{result.account}}</div>
                    </div>
                    <div class="base_info_wrap">
                      <div class="text">开户行：</div>
                      <div class="con">{{result.bank}}</div>
                    </div>
                  </div>
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="collapse_wrap">
              <van-collapse v-model="activeName4" :border="false">
                <van-collapse-item name="4">
                  <template #title><div style="font-weight:700;font-size:16px;">还款来源</div></template>
                  <div class="assets_detail" v-html="result.repayment"></div>
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="collapse_wrap">
              <van-collapse v-model="activeName5" :border="false">
                <van-collapse-item name="5">
                  <template #title><div style="font-weight:700;font-size:16px;">增信措施</div></template>
                  <div class="assets_detail" v-html="result.addMeasure"></div>
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="collapse_wrap">
              <van-collapse v-model="activeName7">
                <van-collapse-item name="7">
                  <template #title><div style="font-weight:700;font-size:16px;">预览材料</div></template>
                  <div class="info_view" @click="viewPdf(result.fileUrla)" v-if="result.fileUrla">
                    <div class="pdf_left">
                      <div class="icon pdf_icon mainColor">
                        <img src="../assets/pdf_icon.png" style="width:100%;height:100%;" alt="">
                      </div>
                      <div class="pdf_text">备案文件</div>
                    </div>
                    <div class="icon pdf_right" v-html="'&#xe7a7;'"></div>
                  </div>
                  <div class="info_view" @click="viewPdf(result.fileUrlb)" v-if="result.fileUrlb">
                    <div class="pdf_left">
                      <div class="icon pdf_icon mainColor">
                        <img src="../assets/pdf_icon.png" style="width:100%;height:100%;" alt="">
                      </div>
                      <div class="pdf_text">基金合同</div>
                    </div>
                    <div class="icon pdf_right" v-html="'&#xe7a7;'"></div>
                  </div>
                  <div class="info_view" @click="viewPdf(result.fileUrlc)" v-if="result.fileUrlc">
                    <div class="pdf_left">
                      <div class="icon pdf_icon mainColor">
                        <img src="../assets/pdf_icon.png" style="width:100%;height:100%;" alt="">
                      </div>
                      <div class="pdf_text">尽调报告</div>
                    </div>
                    <div class="icon pdf_right" v-html="'&#xe7a7;'"></div>
                  </div>
                  <div class="info_view" @click="viewPdf(result.fileUrld)" v-if="result.fileUrld">
                    <div class="pdf_left">
                      <div class="icon pdf_icon mainColor">
                        <img src="../assets/pdf_icon.png" style="width:100%;height:100%;" alt="">
                      </div>
                      <div class="pdf_text">底层资产</div>
                    </div>
                    <div class="icon pdf_right" v-html="'&#xe7a7;'"></div>
                  </div>
                  <div class="info_view" @click="viewPdf(result.fileUrle)" v-if="result.fileUrle">
                    <div class="pdf_left">
                      <div class="icon pdf_icon mainColor">
                        <img src="../assets/pdf_icon.png" style="width:100%;height:100%;" alt="">
                      </div>
                      <div class="pdf_text">担保文件</div>
                    </div>
                    <div class="icon pdf_right" v-html="'&#xe7a7;'"></div>
                  </div>
                </van-collapse-item>
              </van-collapse>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="left mainColor mainBorderColor" @click="toHome">
        <div class="back_index">
          <div class="index_icon"></div>
          <div>首页</div>
        </div>
      </div>
      <div class="right mainBgColor" @click="yuyue(result.status)" :style="{opacity: disabled ? 0.6 : (result.status == 1 ? 1 : 0.6)}">{{disabled || result.status === 3 ? '已预约' : (result.status === 1 ? '立即预约' : '已告罄')}}</div>
    </div>
  </div>
</template>

<script>
import { Sticky, Tab, Tabs, Collapse, CollapseItem } from 'vant'
export default {
  components: {
    [Sticky.name]: Sticky,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
  },
  data() {
    return {
      active: 1,
      activeName1: ['1'],
      activeName2: ['2'],
      activeName3: [],
      activeName4: [],
      activeName5: [],
      activeName6: [],
      activeName7: [],
      disabled: false,
      result: {}
    }
  },
  computed: {
    bdEndDt() {
      let e = this.detail.bdBase.bdEndDt.split('-')
      return `${e[0]}年${e[1]}月${e[2]}日`
    }
  },
  created() {
    this.getData(this.$route.query.id)
  },
  methods: {
    getData(id) {
      this.$http.getProductDetails({id}).then(res => {
        let guimo = this.calcCompany(res.data.result.productScale)
        let qixian = this.calcCompany(res.data.result.term)
        this.result = res.data.result
        this.result.duration = qixian.value
        this.result.durationCompany = qixian.company
        this.result.investmentScale = guimo.value
        this.result.investmentScaleCompany = guimo.company
      })
    },
    calcCompany(value) {
      if (value.endsWith('天')) {
        return {
          value: value.substr(0, value.length - 1),
          company: value.substr(value.length - 1, value.length)
        }
      } else if (value.endsWith('年') || value.endsWith('月')) {
        return {
          value: value.substr(0, value.length - 1),
          company: value.substr(value.length - 1, value.length)
        }
      } else if (value.endsWith('个月')) {
        return {
          value: value.substr(0, value.length - 2),
          company: value.substr(value.length - 2, value.length)
        }
      } else if (value.endsWith('元') || value.endsWith('万') || value.endsWith('亿')) {
        return {
          value: value.substr(0, value.length - 1),
          company: value.substr(value.length - 1, value.length)
        }
      } else {
        return {value, company: ''}
      }
    },
    // 跳转pdf
    viewPdf(e) {
      this.$router.push({name: 'pdf', params: {url: e ? e : ''}})
    },
    yuyue(e) {
      console.log(e)
      if (e === 1 && !this.disabled) {
        this.$http.productSubscribe({productId: this.result.id}).then(res => {
          console.log(res)
          this.$toast('预约成功')
          this.disabled = true
        }).catch(err => {
          console.log(err, 'err')
          this.$toast(err.data.message)
        })
      }
    },
    // 返回首页
    toHome() {
      this.$router.push({name: 'home'})
    }
  }
}
</script>

<style lang="scss" scoped>
  .detail {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    .main {
      flex: 1;
      .content {
        width: 100%;
        height: 100%;
        background: #F6F8FC;
        overflow: scroll;
        .head {
          width: 100%;
          height: 185px;
          background: url('../assets/detail_bg.png') no-repeat;
          background-size: 100% 100%;
          padding: 10px;
          box-sizing: border-box;
          position: relative;
          .head_wrap {
            width: calc(100% - 20px);
            margin-left: 10px;
            height: 140px;
            border-radius: 6px;
            padding: 20px;
            box-sizing: border-box;
            background: url('../assets/detail_bg2.png') no-repeat;
            background-size: 100% 100%;
            position: absolute;
            bottom: 0px; left: 0px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title {
              font-weight: 700;
              color: #333;
            }
            .sn_wrap {
              display: flex;
              align-items: center;
              color: #999;
              .sn {
                flex: 1;
              }
              .sn_copy {
                width: 60px;
                .icon {
                  font-size: 16px;
                  color: #7893be;
                }
              }
            }
            .records_item_detail {
              width: 100%;
              height: 55px;
              color: #333;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .num {
                font-size: 30px;
                font-weight: bolder;
              }
              .detail_title {
                font-size: 13px;
                color: #999;
              }
            }
            .rules {
              width: 100%;
              height: 20px;
              font-size: 13px;
              margin-top: 4px;
              display: flex;
              color: #999;
              align-items: center;
              justify-content: flex-start;
            }
          }
        }
        
        .cont {
          margin-top: 8px;
          padding-bottom: 16px;
          box-sizing: border-box;
          .base {
            color: #333;
            padding: 0px 10px;
            box-sizing: border-box;
            .collapse_wrap {
              width: 100%;
              min-height: 100%;
              overflow: hidden;
              border-radius: 6px;
              margin-bottom: 10px;
            }
            .title {
              font-size: 18px;
              margin-bottom: 4px;
              text-align: left;
            }
            .base_info_wrap {
              font-size: 14px;
              display: flex;
              // align-items: center;
              margin-bottom: 5px;
              color: #09122B;
              .text {
                opacity: .5;
                width: 25%;
                height: 100%;
                display: flex;
                align-items: center;
              }
            }
            .assets_detail {
              flex: 1;
              font-size: 16px;
              color: #09122B;
            }
            .con {
              flex: 1;
            }
            .info_view {
              height: 44px;
              width: 100%;
              margin-bottom: 10px;
              background: #f8f9fb;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .pdf_left {
                display: flex;
                align-items: center;
                .pdf_icon {
                  width: 16px;
                  height: 17px;
                  margin-left: 5px;
                  margin-right: 5px;
                }
                .pdf_text {
                  color: #999;
                }
              }
              .pdf_right {
                font-size: 16px;
                color: #999;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
    .bottom {
      height: 50px;
      font-size: 16px;
      display: flex;
      align-items: center;
      .left {
        height: calc(100% - 2px);
        flex: 1;
        color: #2C51E8 !important;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .back_index {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .index_icon {
            width: 18px;
            height: 18px;
            background: url('../assets/home_icon_active.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .right {
        height: 100%;
        width: 268px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
    }
  }
</style>
